﻿<UserControl
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:converters="clr-namespace:Bookvar.UI.Converters"
   x:Class="Bookvar.UI.TagCloud" x:Name="UserControl">
  <UserControl.Resources>
    <!-- Converter for the fontsize of the tags -->
    <converters:CountToFontSizeConverter x:Key="CountToFontSizeConverter"/>
    <SolidColorBrush x:Key="MainBackgroundBrush" Color="#FF202020"/>
    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
    <SolidColorBrush x:Key="BorderBrush" Color="#FF747474"/>
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
    <SolidColorBrush x:Key="FamilyEditListViewSelectedBrush" Color="#7FFFBD0D"/>
    <SolidColorBrush x:Key="FontColor" Color="#FF1F3066"/>

    <Style x:Key="TagsListBox" TargetType="{x:Type ListBox}">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="Background" Value="{DynamicResource MainBackgroundBrush}"/>
      <Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
      <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBox}">
            <Grid>
              <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
              <ScrollViewer Margin="1" Focusable="false" Background="{TemplateBinding Background}">

                <!-- Replaced the default StackPanel ItemsHost with a WrapPanel to get the TagCloud layout-->
                <WrapPanel Margin="2" IsItemsHost="true"/>

              </ScrollViewer>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <DataTemplate x:Key="TagCloudTemplate">
      <TextBlock Padding="0,0,10,0"
        FontSize="{Binding Path=ItemCount, Converter={StaticResource CountToFontSizeConverter}}"
        Text="{Binding Path=Name, Mode=Default}" VerticalAlignment="Bottom"/>
    </DataTemplate>

    <Style x:Key="TagCloudListBoxItem" TargetType="{x:Type ListBoxItem}">
      <Setter Property="SnapsToDevicePixels" Value="true"/>
      <Setter Property="OverridesDefaultStyle" Value="true"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Grid SnapsToDevicePixels="true">
              <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
            <ControlTemplate.Triggers>

              <!-- Change IsSelected SelectedBackgroundBrush to set the selection color for the items -->
              <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="{DynamicResource FamilyEditListViewSelectedBrush}" TargetName="Border"/>
              </Trigger>

              <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>

    </Style>
  </UserControl.Resources>

  <ListBox x:Name="TagCloudListBox" SelectedIndex="-1" ItemContainerStyle="{DynamicResource TagCloudListBoxItem}" ItemTemplate="{DynamicResource TagCloudTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" IsSynchronizedWithCurrentItem="True" Style="{DynamicResource TagsListBox}" HorizontalAlignment="Stretch" SelectionChanged="TagCloudListBox_SelectionChanged" Background="{x:Null}" BorderThickness="0,0,0,0" Foreground="{DynamicResource FontColor}">

  </ListBox>

</UserControl>
